<template>
<div class="Out">
  
    <el-form ref="rentMessage" :model="rentMessage" label-width="auto" class="page" :rules="rules">
    <el-form-item  label="设置出租时间段" >
      <el-row :gutter="20">
        <el-col :span="6">
    <el-form-item   prop="rentStartTime">
    <el-date-picker
      v-model="rentMessage.rentStartTime"
      type="datetime"

      value-format="timestamp" 
      placeholder="选择日期时间"
      default-time="12:00:00">
    </el-date-picker>
   </el-form-item>
        </el-col>
<el-col :span="6">
   <el-form-item    prop="rentEndTime">
    <el-date-picker
      v-model="rentMessage.rentEndTime"
      type="datetime"
      @change="fu"
      value-format="timestamp" 
      placeholder="选择日期时间"
      default-time="12:00:00">
    </el-date-picker>
   </el-form-item>
</el-col>
      </el-row>
    </el-form-item>

  <el-form-item  label="计费方式" prop="rentype"> 
    <el-row :gutter="5">
        <el-col :span="4">
  <el-radio v-model="rentMessage.rentype" label="0">按小时计费</el-radio>
  </el-col>
  <el-col :span="4">
  <el-radio v-model="rentMessage.rentype" label="1">按天计费</el-radio>
   </el-col>
   <!-- <el-col :span="4">
  <el-radio v-model="rentMessage.rentype" label="2">按周计费</el-radio>
        </el-col> -->
    </el-row>
  </el-form-item>
  

<el-row :gutter="5">
        <el-col :span="4">
    <el-button type="primary" @click="submitForm('rentMessage')" style="width:90px">立即发布</el-button>
</el-col>
    <el-col :span="4">
    <el-button @click="resetForm('rentMessage')" style="width:90px">重置</el-button>
       </el-col>
    </el-row>
  
</el-form>

      
     
     
    
 
  
   

<!-- <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.size" :current-page="pageData.current" @current-change="handleChange">
        </el-pagination> -->
</div>
</template>
<style>


  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

.page{
  width: 800px;
  margin-left: 100px;
}
.duu{
  margin-left: 20px;
  display: block;
}
#map{
  width: 500px;
  height: 500px;
}
</style>


<script>

var cost=0;
export default {
  name: 'Out',
  data() {

     var checktime = (rule, value, callback) => {
      if(this.rentMessage.rentStartTime>value){
        callback(new Error('结束日期必须在开始日期之后'))
     }
     }

     var checkstarttime = (rule, value, callback) => {
      if(this.nowtime>value){
        callback(new Error('开始日期错误'))
     }
     }

      return {
        nowtime:'',
        rentStartTime:'',
        rentEndTime:'',
        value2:"",
        startTime: '',
        endTime: '',
        check:"",
        delivery: false,
        cost:'',
        intervalId:null,
        loading: false,
        parkingSpaceId:"",

        visible: false,
        storeLocation:[],
        rentype:'',
        
      
       
        rentMessage:{
                cost:'',
                spacingSpaceId:"",
                parkingSpaceNo:"", 
                parkingSpacePropertyPic:"",
                propertyManagerId:"",
                hourCost:"",
                dayCost:"",
                parkingSpaceRelownerPic:"",
                parkingSpaceOwnerPic:"",
                weekCost:"",
                pointY:'',
                pointX:'',
                status:0,
                parkingSpaceAddr:'',
                parkingSpacePic:'',
                rentype:"",
                rentStartTime:"",
                rentEndTime:"",
        },

          rules: {
          rentype:[
            { required: true, message: '请选择计费方式', trigger: 'change' },
          ],
          rentStartTime: [
            { required: true, message: '请选择开始时间', trigger: 'change' },
             { validator: checkstarttime, trigger: 'change' }
            
          ],
          rentEndTime: [
            { required: true, message: '请选择结束时间', trigger: 'change' },
            { validator: checktime, trigger: 'change' }
          ],
          
          

        },

        
      }
      },
     

 
  methods:{


    fu(){
      this.rentStartTime=this.rentMessage.rentStartTime
    },
     

      getData(){
        this.nowtime=new Date()
        console.log(this.$route.params.parkingSpaceId)
        
        this.parkingSpaceId=this.$route.params.parkingSpaceId
        this.rentMessage.spacingSpaceId=this.$route.params.parkingSpaceId
        console.log(this.rentMessage.spacingSpaceId)
        this.$http.get("/findparkingspacebyid",{
            params:{
                parkingSpaceId:this.$route.params.parkingSpaceId
               
            }
          })
          .then(res => {
                if(res!=null){
                  console.log(res)
                  console.log("=======!!!!!=======")
                  console.log(this.rentMessage)
                this.rentMessage.parkingSpacePropertyPic=res.data.data.parkingSpacePropertyPic
                this.rentMessage.propertyManagerId=res.data.data.propertyManagerId
                this.rentMessage.hourCost=res.data.data.hourCost
                this.rentMessage.dayCost=res.data.data.dayCost
                this.rentMessage.parkingSpaceRelownerPic=res.data.data.parkingSpaceRelownerPic
                this.rentMessage.parkingSpaceOwnerPic=res.data.data.parkingSpaceOwnerPic
                this.rentMessage.weekCost=res.data.data.weekCost
                this.rentMessage.pointY=res.data.data.pointY
                this.rentMessage.pointX=res.data.data.pointX
                this.rentMessage.lessorId=res.data.data.userId
                this.rentMessage.parkingSpaceAddr=res.data.data.parkingSpaceAddr
                this.rentMessage.parkingSpacePic=res.data.data.parkingSpacePic
                if(this.rentMessage.rentype==0){
                  cost=((this.rentMessage.rentEndTime-this.rentMessage.rentStartTime)/1000/3600)*this.rentMessage.hourCost
                }else if(this.rentMessage.rentype==1) {
                  cost=((this.rentMessage.rentEndTime-this.rentMessage.rentStartTime)/1000/3600/24)*this.rentMessage.dayCost
                }
                console.log(cost)
                this.rentMessage.cost=cost
                             
                }
                
            })
            .catch(err => {
                console.error(err); 
            })
  },  
     

  
    hour(){
      console.log("asda")
      if(this.delivery){
       this.ban=false
      }else{
       this.ban=true
      }
    },
 
    changestate(){
      this.$http.get("/changestate",{
                  params:{
                    state:"3",
                    parkingSpaceId:this.parkingSpaceId
                  }
                })
                .then(res => {
                if(res!=null){
                   this.$message({
                  message: '修改状态成功',
                  type: 'success'
        });
                  console.log("状态修改成功")
                }
                })
                .catch(err => {
                console.error(err); 
            })
    },

        submitForm(formName) {
            this.getData()
            console.log("检查一下")
             this.$http.post("/addOrder",this.rentMessage)
              .then(res => {
                console.log(res)
                if(res!=null){ 
                // 修改车位状态为 已出租
                if(res.data.message=="发布订单成功"){
                    this.$message({
                    type:'success',
                    message:'发布车位成功！'
                })
                this.$router.push("/Order")
                }else if(res.data.message=="时间有冲突"){
                  this.$message({
                    type:'error',
                    message:'发布车位时间有冲突！'
                })
                  this.resetForm(formName)
                }else{
                   
                   this.$message.error('发布车位失败');
                  
                }
                // this.changestate()
                
                }
               
            })
            .catch(err => {
                console.error(err); 
            })
           
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    mounted(){
      
    this.getData()
    
  }
       
  }

</script>

